<template>
  <el-row :gutter="22">
    <el-col :span="18">
      <div
        class="grid-content bg-purple"
        id="myEchart"
        style="
          min-width: 879px;
          height: 420px;
          border-radius: 15px;
          margin-right: 22px;
        "
      ></div>
    </el-col>
    <el-col :span="6">
      <div
        class="grid-content bg-purple"
        style="width: 247px; height: 420px; border-radius: 15px"
      >
        <span style="color: #737373; font-size: 18px">今日会员消费占比</span>
        <div class="amtall">
          <p style="color: #fdfdfd; font-size: 12px" class="expendamount">
            今日消费总额
          </p>
          <p
            style="color: #eaf2f9; font-size: 24px; font-weight: bold"
            class="rate"
          >
            ￥4200.00
          </p>
        </div>
        <div style="color: #4c4b4b; font-size: 14px" class="vip-novip">
          <div class="vip-rate">
            <p></p>
            会员消费占比40.7%
          </div>
          <div class="novip-rate">
            <p></p>
            非会员消费占比40.7%
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.initEachrt();
  },
  methods: {
    initEachrt() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("myEchart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "诊所收入趋势",
          textStyle: {
            color: "#c5c5c5",
            fontSize: 18,
          },
        },
        legend: {
          show: true,
          icon: "circle",
          top: "2%",
          right: "10%",
          itemWidth: 6,
          itemHeight: 6,
          itemGap: 25,
        },
        grid: [
          {
            left: "10%",
            bottom: "10%",
            top: "30%",
            right: "10%",
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                color: "#ddd",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#c56790",
              },
              margin: 15,
            },
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: true,
            },
            axisLine: {
              lineStyle: {
                color: "#ddd",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#000",
              },
            },
            splitLine: {
              show: true,
            },
          },
        ],
        series: [
          {
            name: "近一年月均",
            type: "line",
            data: [2000, 3200, 2100, 3900, 5500, 4600, 3000, 5500, 4600, 3000],
            symbolSize: 6,
            symbol: "none",
            smooth: true,
            lineStyle: {
              color: "none",
            },
            itemStyle: {
              normal: {
                color: "#fad7c8",
                borderColor: "#fad7c8",
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#fad7c8",
                },
                {
                  offset: 1,
                  color: "#fad7c8",
                },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fad7c8",
                    },
                    {
                      offset: 0.4,
                      color: "#fad7c8",
                    },
                    {
                      offset: 0.5,
                      color: "#fff",
                    },
                    {
                      offset: 0.7,
                      color: "#fff",
                    },
                    {
                      offset: 0.8,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                },
                borderColor: "#9E87FF",
                borderWidth: 2,
              },
            },
          },
          {
            name: "近30天",
            type: "line",
            data: [4200, 3700, 2700, 3000, 2500, 3000, 2500, 3500, 2100, 3400],
            symbolSize: 6,
            symbol: "none",
            smooth: true,
            lineStyle: {
              color: "none",
            },
            itemStyle: {
              normal: {
                color: "#DDADE8",
                borderColor: "#DDADE8",
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#DDADE8",
                },
                {
                  offset: 1,
                  color: "#DDADE8",
                },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#DDADE8",
                    },
                    {
                      offset: 0.4,
                      color: "#DDADE8",
                    },
                    {
                      offset: 0.5,
                      color: "#fff",
                    },
                    {
                      offset: 0.7,
                      color: "#fff",
                    },
                    {
                      offset: 0.8,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                },
                borderColor: "#DDADE8",
                borderWidth: 2,
              },
            },
          },
          {
            //7天
            name: "近7天",
            type: "line",
            data: [2700, 3000, 2500, 3500, 3300, 3000, 1700, 1700, 1200, 1500],
            symbolSize: 6,
            symbol: "none",
            smooth: true,
            lineStyle: {
              color: "none",
            },
            itemStyle: {
              normal: {
                color: "#8898DD",
                borderColor: "#8898DD",
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#8898DD",
                },
                {
                  offset: 1,
                  color: "#8898DD",
                },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#8898DD",
                    },
                    {
                      offset: 0.4,
                      color: "#8898DD",
                    },
                    {
                      offset: 0.5,
                      color: "#fff",
                    },
                    {
                      offset: 0.7,
                      color: "#fff",
                    },
                    {
                      offset: 0.8,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                },
                borderColor: "#8898DD",
                borderWidth: 2,
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.amtall {
  width: 200px;
  height: 200px;
  margin-top: 74px;
  margin-left: 25px;
  background: url("../../../imgs/切图/经营概况/矢量智能对象.png");
  position: relative;

  .expendamount {
    position: absolute;
    top: 60px;
    left: 60px;
  }
  .rate {
    position: absolute;
    top: 110px;
    left: 43px;
  }
}
.vip-novip {
  margin-top: 60px;
  margin-left: 38px;
  div {
    margin-bottom: 10px;
    letter-spacing: 1px;
  }
  p {
    display: inline-block;
    border: 5px solid red;
    border-radius: 50%;
    margin-right: 5px;
  }
  .vip-rate {
    p {
      border-color: #55a5db;
    }
  }
  .novip-rate {
    p {
      border-color: #4863ae;
    }
  }
}
.el-row {
  margin-bottom: 26px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  padding: 20px;
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
